<template>
	<div class="content" v-if="this.tid==this.curTid">
		<div>
			<div>
				<p>热门推荐</p>
			</div>
			<div class="video_box">
				<a href="" v-if="index<4" v-for="(item,index) in recommendList">
					<div class="img_box">
						<div class="img_s_box">
							<img src="../../common/img/tv.png" />
							<img v-lazy="item.pic" />
						</div>

						<div class="play_data">
							<div class="">
								<div class="index_svg_box">
									<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
										<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-bofangshu"></use>
									</svg>
								</div>
								<span>{{_play_data(item.play)}}</span>
							</div>
							<div class="">
								<div class="index_svg_box">
									<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
										<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-danmushu"></use>
									</svg>
								</div>
								<span>{{_play_data(item.video_review)}}</span>
							</div>
						</div>
					</div>
					<div class="til_box">
						<p>{{item.title}}</p>
					</div>
				</a>

			</div>
		</div>
		<div v-for="(item,index) in titleList">
			<div>
				<p>{{item.typename}}</p>
			</div>
			<div class="video_box">
				<a href="" v-for="(ite,ind) in dataList" v-if="_judge(item.typename,ite.typename,ind)">
					<div class="img_box">
						<div class="img_s_box">
							<img src="../../common/img/tv.png" />
							<img v-lazy="ite.pic" />
						</div>
						<div class="play_data">
							<div class="">
								<div class="index_svg_box">
									<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
										<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-bofangshu"></use>
									</svg>
								</div>
								<span>{{_play_data(ite.play)}}</span>
							</div>
							<div class="">
								<div class="index_svg_box">
									<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
										<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-danmushu"></use>
									</svg>
								</div>
								<span>{{_play_data(ite.video_review)}}</span>
							</div>
						</div>
					</div>
					<div class="til_box">
						<p>{{ite.title}}</p>
					</div>
				</a>
			</div>
		</div>
	</div>
	<div class="content" v-else>
		<div>
			<div>
				<p>热门推荐</p>
			</div>
			<div class="video_box">
				<a href="" v-if="index<4" v-for="(item,index) in recommendList">
					<div class="img_box">
						<div class="img_s_box">
							<img src="../../common/img/tv.png" />
							<img v-lazy="item.pic" />
						</div>

						<div class="play_data">
							<div class="">
								<div class="index_svg_box">
									<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
										<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-bofangshu"></use>
									</svg>
								</div>
								<span>{{_play_data(item.play)}}</span>
							</div>
							<div class="">
								<div class="index_svg_box">
									<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
										<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-danmushu"></use>
									</svg>
								</div>
								<span>{{_play_data(item.video_review)}}</span>
							</div>
						</div>
					</div>
					<div class="til_box">
						<p>{{item.title}}</p>
					</div>
				</a>

			</div>
		</div>
		<div>
			<div>
				<p>最新视频</p>
			</div>
			<div class="video_box">
				<a href="" v-if="index<10" v-for="(item,index) in recommendList">
					<div class="img_box">
						<div class="img_s_box">
							<img src="../../common/img/tv.png" />
							<img v-lazy="item.pic" />
						</div>

						<div class="play_data">
							<div class="">
								<div class="index_svg_box">
									<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
										<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-bofangshu"></use>
									</svg>
								</div>
								<span>{{_play_data(item.play)}}</span>
							</div>
							<div class="">
								<div class="index_svg_box">
									<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true">
										<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-danmushu"></use>
									</svg>
								</div>
								<span>{{_play_data(item.video_review)}}</span>
							</div>
						</div>
					</div>
					<div class="til_box">
						<p>{{item.title}}</p>
					</div>
				</a>

			</div>
		</div>
	</div>
</template>

<script>
	let partitionList = window.__INITIAL_STATE__.reduxAsyncConnect.partitionList;
	import CONFIG from "@/config";
	import axios from "axios";
	export default {
		data() {
			return {
				tid: "",
				titleList: [],
				dataList: [],
				tidList: [],
				recommendList: [],
				curTid:""
			}
		},
		created() {
			this.tid = this.$route.params.tid //初始化
			this.$store.commit("setCurTid", {
				curTid: this.$route.params.tid
			})
			this.curTid = this.$store.getters.getCurTid //初始化赋值
			console.log("vuex返回的tid", this.curTid)
			this._gettjList()
			if(this.$route.params.tid == this.curTid) {
				this.titleList = partitionList[this.$route.params.tid]
				this._getTidList() //获取tidList同时获取data
				this._gettjList()
			}
		},
		watch: {
			$route(newValue) {
				this.tid = newValue.params.tid //动态
				this.titleList = partitionList[newValue.params.tid]
				this.$store.commit("setCurTid", { //动态提交tid，返回更新后tid
					curTid: this.$route.params.tid
				})
				this.curTid = this.$store.getters.getCurTid;
				if(newValue.path.indexOf("channel") > 0){
					this._gettjList()//根据tid请求对应二级下的数据
				}
				if(newValue.path.indexOf("channel") > 0 && newValue.params.tid == this.curTid) {
					this._getTidList() //获取tidList同时获取data
				}
			}
		},
		methods: {
			_play_data(el) {
				return el > 10000 ? (el / 10000).toFixed(1) + "万" : el
			},
			_getdata(tiditem) {
				var url = CONFIG.domain + "/region";
				axios.get(url, {
					params: {
						rid: tiditem,
					}
				}).then((res) => {
					//				 	console.log("传回来的！",res)
					res.data.data.splice(0, 4).forEach((el, index) => {
						this.dataList.push(el)
					})
				})

			},
			_getTidList() {
				this.dataList = []
				this.tidList = []
				partitionList[this.$route.params.tid].forEach((el, index) => {
					this.tidList.push(el.tid)
				})
				console.log("Tid盒子", this.tidList) //当前页面所需tid
				this.tidList.forEach((el, index) => {
					this._getdata(el)
				})
				console.log("大数据盒子", this.dataList)
			},
			_gettjList() { //获取推荐数据
				this.recommendList = []
				var url = CONFIG.domain + "/region";
				axios.get(url, {
					params: {
						rid: this.tid,
					}
				}).then((res) => {
					res.data.data.forEach((el, index) => {
						this.recommendList.push(el)
					})
				})
			},
			_judge(a, b) {
				return a == b
			},
		},
	}
</script>

<style>
.content{
	padding-top: 45px;
}
</style>